<template>
  <section class="text-white bg-[#232728] lg:bg-[unset] relative">
    <!-- title -->
    <div class="p-5 flex justify-between items-center lg:hidden">
      <p class="text-base">{{ $mt('Select Denomination') }}</p>
      <w-image class="w-6 h-6" @click="closePopup" :src="useAsset('h5-detail-select/close.png')" />
    </div>
    <!-- list -->
    <div
      class="max-h-[400px] pb-[80px] overflow-y-auto rounded-xl lg:rounded-none border-y-[.5px] border-[#3b4245] border-[solid] bg-[#232728] p-5 lg:max-h-[unset] lg:border-[0] lg:bg-[unset] lg:p-0">
      <div v-if="curGoodsSkuList.length" class="grid grid-cols-1 lg:grid-cols-2 lg:gap-5 gap-y-4">
        <div
          :class="{ 'sku-active': curSkuId === item.id }"
          class="relative cursor-pointer flex items-start rounded-md border-[2px] border-[transparent] bg-[#393d3e] py-3 pl-2.5 pr-8 lg:pt-3.5 lg:pb-[14px lg:px-3.5"
          v-for="(item, index) in curGoodsSkuList"
          @click="handleSelectItem(item, index)"
          :key="index">
          <!-- 选中的勾 -->
          <WImage
            v-if="curSkuId === item.id"
            class="w-7 h-4 absolute right-[-1px] top-[-1px]"
            :src="useAsset('h5-detail-select/item_icon_Selected.png')" />
          <!-- 商品图片 -->
          <YImage
            class="ltr:mr-2.5 rtl:ml-2.5 shrink-0 w-16 object-cover product-poster--small h-16 rounded-lg"
            :alt="`${$mt('how to recharge')} ${item.name}`"
            :src="item.smallIcon || curGoodsDetail.smallIcon"
            width="60"
            height="60" />
          <!-- right-->
          <div>
            <h3 class="font-bold text-sm lg:text-base break-all leading-5 mb-2">
              {{ curGoodsDetail.isWalletPurchaseGoods ? $calcPrice(item.price) : item.name }}
            </h3>
            <!-- 折扣 -->
            <span class="text-[#9acd32] text-sm lg:text-base" v-if="item.discount">
              {{ $mt('Discount') }}: {{ $calcDiscount(item.discount) }}
            </span>
            <div class="flex items-center">
              <strong class="text-red1 text-sm lg:text-base ltr:mr-2.5 lg:ltr:mr-5 rtl:ml-2.5 lg:rtl:ml-5">
                {{ $calcPrice(item.price) }}
              </strong>
              <span class="text-[rgba(255,255,255,0.6)] text-sm line-through" v-if="item.originalPrice">
                {{ $calcPrice(item.originalPrice) }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-[#23282a] rounded-2xl" v-else>
        <common-empty />
      </div>
      <!-- list -->
    </div>
    <!-- 确定按钮 -->
    <div @click="closePopup" class="mx-auto absolute bottom-0 w-full p-2.5 h-16 lg:hidden bg-black">
      <div class="text-sm w-full flex items-center justify-center h-full font-[500] bg-red1 rounded-sm">
        {{ $mt('CONFIRM') }}
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { useGoodsStore } from '~/store/goods'
import YImage from '~/components/logic/YImage.vue'
import WImage from '~/components/logic/WImage.vue'
import CommonEmpty from '~/components/basis/CommonEmpty.vue'

const emits = defineEmits(['changeIsShow'])
const props = withDefaults(defineProps<{ isShow?: boolean }>(), {})
const { gtag_report } = useCommonPlugin()
const goodsStore = useGoodsStore()
const { curGoodsSkuList, curSkuId, curGoodsDetail } = storeToRefs(goodsStore)
const bigSkuList = ref(curGoodsSkuList.value.slice(0, 5))

const handleSelectItem = (item: any, index: number) => {
  setTimeout(() => gtag_report('conversion_event_default'), 500)
  emits('changeIsShow', false)
  goodsStore.setCurSkuId(item.id)
}

// 保存选中商品的信息，并且关闭弹窗
const closePopup = () => {
  emits('changeIsShow', false)
}
// 展开全部的 list
const viewMoreSkuList = () => {
  if (bigSkuList.value.length !== curGoodsSkuList.value.length) {
    bigSkuList.value = curGoodsSkuList.value
  } else {
    bigSkuList.value = curGoodsSkuList.value.slice(0, 5)
  }
}
</script>

<style lang="scss">
.sku-active {
  border: 2px solid #eb414e;
}
</style>
